import * as THREE from './three/three.module.js';
import Level from './tool/level.js';
import Card from './tool/card.js';
import Canvas from './tool/canvas.js';
import Sur from './tool/surface.js';
import Click from './tool/click.js';
import Arrow from './tool/arrow.js';

var level = Level();
level.launch();
level.on_create.push(function(){
    var ground = level.default_scene().mesh;
    var scene = level.scene;
    var loader = new THREE.TextureLoader();
    var video = document.createElement('video');
    video.src = './img/trump.mp4';
    video.loop = true;
    level.need_load();
    video.oncanplay = function(){
        level.loaded();
        video.oncanplay = null;
    };
    level.on_start.push(function(){
        video.play();
    });
    var aTexture = new THREE.VideoTexture( video );
    var bTexture = loader.load( './img/card_back.jpg' );

    var canvas = Canvas.Canvas(128, 128);
    Canvas.clean(canvas);
    Canvas.text(canvas, '川皇', 25, 15);
    var ct = new THREE.CanvasTexture(canvas);

    var card = Card(400*0.618, 400, aTexture, bTexture, ct);
    card.position.x = 300;
    card.position.y = 400;
    card.position.z = 0;
    card.rotation.x = Math.PI/2;
    card.rotation.z = Math.PI/4;
    scene.add(card);

    var arrow = Arrow.Arrow();
    scene.add(arrow);
    var flag = true;
    level.addEventListener('click', Click.clickFunc(function(ray){
        if(flag){
            flag = false;
            return;
        }
        ray.init(level.camera);
        var rci = ray.findClicked(scene);
        if(rci.length>0){
            Arrow.shape(arrow, new THREE.Vector3(0, 0, 0), rci[0].point, Math.PI/3);
        }
    }));

    // var plane = new THREE.Mesh( new THREE.PlaneBufferGeometry( 10, 10 ), new THREE.MeshBasicMaterial({color: 0xff0000, transparent: true, opacity: 0.8 }) );
    // Sur.add(group, plane);

});

var group = Sur.Group(level);